<!--
 * @Author: chenxuan
 * @Date: 2022-06-08 13:30:44
 * @LastEditTime: 2022-11-30 12:18:49
 * @LastEditors: chenxuan
-->
<template>
  <div class="layout" :class="theme">
    <Menus></Menus>
    <Top></Top>
    <div class="container" :class="{ container_: isCollapse}">
      <!-- <Tab/> -->
      <div class="containerNormal">
          <router-view/>
      </div>
    </div>
  </div>
</template>
<script>
import { mapGetters } from "vuex";
import Top from "@/components/layout/top"; 
import Tab from "@/components/layout/tab"; 
import Menus from "@/components/layout/menusList";
export default {
  name: "layout",
  components: {
    Top,
    Menus,
    Tab
  },
  data: function () {
    return {};
  },
  computed: {
    ...mapGetters([
      "theme",
      "fullHeight",
	  "isCollapse"
    ]),
  },
  created: function () {
    this.$store.commit("getScreemInfo");
  },
  methods: {

  },
};
</script>
<style>
.containerNormal {
  width: 100%;
  height: 100%;
  border-radius: 4px;
  background-color: #fff;
  /*火狐浏览器滚动条美化 第一个值是滚动条的底色(track)，第二个值值滚动条可以移动部分的颜色(thumb)  火狐64版以上*/
  scrollbar-color: #e5e5e5 #f7f7f9;
  /*美化火狐浏览器滚动条 控制滚头条宽度 火狐64版以上*/
  scrollbar-width: thin;
  overflow-y: auto;
}
/*谷歌内核浏览器滚动条美化*/
.containerNormal::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}
.containerNormal::-webkit-scrollbar-track {
  background-color: #f5f5f5;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  border-radius: 4px;
}
.containerNormal::-webkit-scrollbar-thumb {
  background-color: #c8c8c8;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  border-radius: 4px;
}
.containerMax {
  position: fixed;
  z-index: 99;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
</style>
